<template>
	<div class="home">
		<h1>钩子函数</h1>
		<button @click="show = !show">{{ show }}</button>
		<child v-if="show"></child>
		<hr />
		<button @click="fun_aaa_add">aaa:{{ aaa }}</button>
	</div>
</template>

<script lang="">
import { defineComponent, ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';
import child from './child.vue';
import hook_js from './hook.js';
export default defineComponent({
	components: {
		child
	},
	setup() {
		console.log('setup');
		onBeforeMount(() => {
			console.log('onBeforeMount');
		});
		onMounted(() => {
			console.log('onMounted');
		});
		onBeforeUpdate(() => {
			console.log('onBeforeUpdate');
		});
		onUpdated(() => {
			console.log('onUpdated');
		});
		onBeforeUnmount(() => {
			console.log('onBeforeUnmount');
		});
		onUnmounted(() => {
			console.log('onUnmounted');
		});

		let show = ref(true);
		let { aaa, bbb, fun_aaa_add } = hook_js();
		return {
			show,
			aaa,
			bbb,
			fun_aaa_add
		};
	}
});
</script>
